<template>
  <view>
    <u-popup
      v-model="showPopu"
      ref="popup"
      mode="bottom"
      @close="closeFun"
      border-radius="30"
    >
      <view class="sel">
        <view class="sel-title">请选择接车施工技师</view>
        <scroll-view :scroll-y="true" class="sel-body">
          <radio-group @change="radioChange" v-if="list.length > 0">
            <view class="item" v-for="(item, index) in list" :key="index">
              <label class="flex flex-ai-c">
                <radio
                  :value="index + ''"
                  :checked="index === current"
                  color="#FDD421"
                  style="transform: scale(0.9)"
                />
                <view class="item-right flex flex-1 flex-dir-c flex-jc-c">
                  <view class="item-name">{{ item.name }}</view>
                  <view class="item-time flex">
                    <text class="flex-1" v-if="item.latelyWorkTime"
                      >最近下工时间：{{ item.latelyWorkTime }}</text
                    >
                    <!-- <text class="flex-1 color-3DB707" v-else>空闲</text> -->
                    <text
                      :class="item.isWorking ? 'color-EB5C02' : 'color-3DB707'"
                      >{{ item.isWorking ? '施工中' : '空闲' }}</text
                    >
                  </view>
                </view>
              </label>
              <view class="box" v-if="item.isWorking"></view>
            </view>
          </radio-group>
        </scroll-view>
        <view class="sel-footer"
          ><button class="btn-primary" @click="confirm">确定</button></view
        >
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  name: 'technicianSelector',
  props: ['showoppen', 'current'],
  data() {
    return {
      showStatus: false,
      pageIndex: 1,
      pageSize: 10,
      seleted: null,
      showPopu: false,
      list: [],
    }
  },

  watch: {
    showoppen(value) {
      this.showPopu = value
    },
  },

  created() {
    this.getlist()
  },
  methods: {
    //选择技师
    radioChange(e) {
      // console.log(e)
      this.seleted = e.detail.value
    },
    getlist() {
      let data = {
        pageIndex: this.pageIndex,
        pageSize: this.pageSize,
      }
      this.$api.afterSales
        .GetWorkerPageList(data)
        .then((res) => {
          // console.log(res);
          this.list = res.data.list
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 点击确定调用函数
    confirm() {
      if (this.seleted === null) {
        uni.showToast({
          title: '请选择施工技师',
          icon: 'none',
        })
        return
      }
      this.$emit('selTechnician', this.list[this.seleted])
    },
    closeFun() {
      this.$emit('closeEchnician')
    },
  },
}
</script>

<style lang="scss">
@mixin dingwei() {
  /* 定义flex容器 */
  display: flex;
  /*设置容器内部容器的排列方向*/
  flex-direction: row;
}

@mixin danhang1() {
  /* 单行...*/
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

@mixin imgsize() {
  width: 100%;
  height: 100%;
}

@mixin colorbj() {
  width: 40rpx;
  height: 40rpx;
  border-radius: 50rpx;
}

@mixin shuanghang2() {
  /* 两行...*/
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  word-wrap: break-word;
  white-space: normal !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

@mixin justify() {
  display: -webkit-flex;
  /* Safari */
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}

.sel {
  font-family: PingFang SC;
  font-weight: 500;
  text-align: center;

  .sel-title {
    font-size: 36rpx;
    text-align: center;
    font-weight: 500;
    color: rgba(54, 54, 54, 1);
    line-height: 100rpx;
    border-bottom: 2px solid #eee;
  }

  .sel-body {
    // padding: 0 24rpx;
    height: 650rpx;

    .item {
      position: relative;
      padding: 0 24rpx;
      height: 130rpx;

      .box {
        position: absolute;
        top: 0;
        left: 0;
        height: 130rpx;
        width: 100%;
        background: rgba(0, 0, 0, 0.14);
      }

      .item-right {
        height: 130rpx;
        text-align: left;
        padding-left: 20rpx;
        border-bottom: 2px solid #eee;

        .item-name {
          color: #333;
          font-size: 30rpx;
          font-weight: 500;
        }
        .item-time {
          padding-top: 8rpx;
          font-size: 26rpx;
          font-weight: 500;
          color: #999;
        }
      }
    }
  }

  .sel-footer {
    padding: 30rpx 0;
  }
}
/deep/ uni-radio .uni-radio-input.uni-radio-input-checked:before {
  color: #000;
}
</style>
